const fs = require('fs')
const path = require('path')
const resolve = file => path.resolve(__dirname, file)
const { createBundleRenderer } = require('vue-server-renderer')

const stepDevServer = require('./build/step-dev-server')
const express = require('express')
const server = express()
// 静态文件
server.use('/dist', express.static('./dist'))

const isProd = process.env.NODE_ENV === 'production'
let renderer
let ready
if(isProd)  { // 生产环境，直接使用打包后的文件就可
    const template = fs.readFileSync('./index.template.html', 'utf-8')
    const serverBundle = require('./dist/vue-ssr-server-bundle.json')
    const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createBundleRenderer(serverBundle, {
        template, // （可选）页面模板
        clientManifest // （可选）客户端构建 manifest
    })
} else {
    // 开发模式 -》 监听文件改变 =》 打包构建 -》 重新渲染
    ready = stepDevServer(server, (template, serverBundle, clientManifest) => {
        renderer = createBundleRenderer(serverBundle, {
            template, // （可选）页面模板
            clientManifest // （可选）客户端构建 manifest
        })
    })
}

const render = async (req, res) => {
    try {
        const html = await renderer.renderToString({
            title: 'text',
            meta: `<meta name="description" content="text"></meta>`,
            url: req.url
        })
        res.setHeader('Content-type', 'text/html; charset=utf8') // 设置响应编码utf8
        res.end(html)
    } catch(err) {
        if (err) {
            if (err.code === 404) {
                res.status(404).end('Page not found')
            } else {
                res.status(500).end('Internal Server Error')
            }
        }
    }
}

// 服务器所有路径都匹配到这里
server.get('*', isProd 
    ? render
    : async (req, res) => { 
        // TODO: 等待文件更新后，再重新渲染
        await ready
        render(req, res)
    }
)

server.listen(3000, () => {
    console.log('server is running on localhost:3000...')
})

